<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<title>OS3 Grid Example 5</title>
	<link type="text/css" rel="stylesheet" href="css/examples.css" />
	<link type="text/css" rel="stylesheet" href="../os3grid.css" />
	<script src="../../../os3jslib/liwe.js" type="text/javascript"></script>
	<script src="../../../os3jslib/validators.js" type="text/javascript"></script>
	<script src="../os3grid.js" type="text/javascript"></script>
</head>
<body>
<div id="block_top">
	<h2 class="center">OS3Grid Example 5 - Custom Callbacks</h2>
	<h4 class="center">By Fabio Rotondo - fsoft (@) sourceforge ( dot ) net</h4>
</div>

<div id="block_left">
	<div class="menu_title">Examples</div>

	<div>
		<a href="index.html">Main Page</a><br />
		<a href="ex1.html">Simple Grid</a><br />
		<a href="ex2.html">Sortable Grid</a><br />
		<a href="ex3.html">Selectable Cells Grid</a><br />
		<a href="ex4.html">Editable Grid</a><br />
		<a href="ex5.html">Custom Callbacks</a><br />
		<a href="ex6.html">Rows Selection</a><br />
		<a href="ex7.html">Column Resize</a><br />
		<a href="ex8.html">Column Renderers</a><br />
		<a href="ex9.html">Delete row</a><br />
	</div>

	<div class="menu_title">Advanced Examples</div>
	<div>
		<a href="adv_styles.html">Setting and Using Styles</a><br />
		<a href="adv_edit.html">Using OS3Grid to edit a dataset</a><br />
		<a href="adv_cell_manip.html">Advanced Cell Value Manipulation</a><br />
	</div>

	<div class="menu_title">Support OS3Grid</div>
	<a href="http://sourceforge.net/donate/index.php?group_id=132180" target="_blank"><img src="http://images.sourceforge.net/images/project-support.jpg" width="88" height="32" border="0" alt="Support OS3Grid" /> </a>
</div>

<div id="block_middle">
	<div>
		This next examples shows you how to refine actions when the user clicks on column titles.
		First of all, we'll show an "Hello World!" message box when the user clicks on "Lastname".

		<div class="code">
				// Column 1 will print "hello world" on click
				g.set_click_cb ( 1, "alert ( 'hello world!' )" );

				// Column "Lastname" does not produce any event on click
				g.set_click_cb ( 2, -1 );
		</pre></div>

		Since this example is quite simple, we have added also an example on how to call a function
		each time the grid is rendered. To set a callback each time the grid is rendered on screen, 
		simply refine the "onrender" attribute, this way:

		<div class="code">
				// A callback for each render event
				g.onrender = rendered;
		</pre></div>

		Callback function should get one argument (the grid instance) like this one:

		<div class="code">
				function rendered ( grid )
				{
					alert ( "Grid: " + grid.id + " rendered" );
				}
		</pre></div>


		That's all! The final result is shown below.

		<div class="result">

			<div id="grid"></div>
			<script type="text/javascript">
				function rendered ( grid )
				{
					alert ( "Grid: " + grid.id + " rendered" );
				}

				// Create an OS3Grid instance
				var g = new OS3Grid ( 'my_grid' );

				// Grid Headers are the grid column names
				g.set_headers ( 'nick', 'Name', 'Surname', 'Age' );

				// Now, we add some rows to the grid
				g.add_row ( 'fsoft', 'Fabio', 'Rotondo', 33 );
				g.add_row ( 'john', 'John', 'Bustone', 31 );
				g.add_row ( 'mkey', 'Mark', 'Key', 28 );
				g.add_row ( 'jdoe', 'John', 'Doe', 35 );

				// Enable sortable rows
				g.sortable = true;

				// Enable highlight of rows with the mouse
				g.highlight = true;

				// "Age" column is an integer number
				g.set_col_type ( 3, "int" );


				// Column 1 will print "hello world" on click
				g.set_click_cb ( 1, "alert ( 'hello world!' )" );

				// The second column is not clickable
				g.set_click_cb ( 2, -1 );

				// A callback for each render event
				g.onrender = rendered;
				
				// Show the grid replacing the original HTML object with the "grid" ID.
				g.render ( 'grid' );
			</script>
		</div>
	</div>
</div>

</body>
</html>

